import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import * as $ from 'jquery';
import {MessageService} from '../services/message.service';
import {HttpClient} from '@angular/common/http';
import {AppComponent} from '../app.component';

@Component({
  selector: 'app-general',
  templateUrl: './general.component.html',
  styleUrls: ['./general.component.css']
})
export class GeneralComponent implements OnInit {
  // 商品信息
  productNew = {
    img: '',
    title: '',
    gui: '无',
    num: 0,
    price: 0,
    total: 0,
  };
  iscnj: boolean;
  isanj: boolean;
  //
  nNum = 1;
  imgs: string;
  daclass: string;
  xiclass: string;
  depict: string;
  price: number;
  // 计时器
  timeStart: any;
  timeEnd: any;
  intDay: any;
  intHour: any;
  intMinute: any;
  intSecond: any;
  isLock = true;
  timer = null;
  constructor(private getInfo: ActivatedRoute, private msg: MessageService, private http: HttpClient, private app: AppComponent) {
    setInterval(() => {
      this.timeStart = new Date().getTime();
      this.timeEnd =  new Date('2018/02/9 18:00:00').getTime();
      // 计算时间差
      let timeDistance = this.timeEnd - this.timeStart;
      // 天
      this.intDay = Math.floor(timeDistance / 86400000);
      timeDistance -= this.intDay * 86400000;
      // 时
      this.intHour = Math.floor(timeDistance / 3600000);
      timeDistance -= this.intHour * 3600000;
      // 分
      this.intMinute = Math.floor(timeDistance / 60000);
      timeDistance -= this.intMinute * 60000;
      // 秒
      this.intSecond = Math.floor(timeDistance / 1000);
      // 时分秒为单数时、前面加零
      if (this.intDay < 10) {
        this.intDay = '0' + this.intDay;
      }
      if (this.intHour < 10) {
        this.intHour = '0' + this.intHour;
      }
      if (this.intMinute < 10) {
        this.intMinute = '0' + this.intMinute;
      }
      if (this.intSecond < 10) {
        this.intSecond = '0' + this.intSecond;
      }
    }, 1000);
  }

  ngOnInit() {
    this.getInfo.params.subscribe((data) => {
      this.imgs = data.imgs;
      this.depict = data.depict;
      this.price = data.price;
      this.depict = data.depict;
      this.daclass = data.daclass;
      this.xiclass = data.xiclass;
      this.productNew.img = data.imgs;
      this.productNew.title = data.depict;
      this.productNew.price = data.price;
    });
  }
  // 放大镜部分
  domgen () {
    // mack 元素显示
    this.iscnj = true;
    // 大图显示
    this.isanj = true;
  }
  doMouse (e) {
    let x = e.pageX;
    let y = e.pageY;
    let leftX = $('.left').offset().left;
    let topY = $('.left').offset().top;
    let offsetX = x - leftX;
    let offsetY = y - topY;
    // 计算 mask 的 left 和 top
    let maskL = offsetX - $('#mask').get(0).clientWidth / 2;
    let maskT = offsetY - $('#mask').get(0).clientHeight / 2;
    // 边界控制
    // 水平方向
    if (maskL <= 0) {
      maskL = 0;
    } else if (maskL >= $('#small').get(0).clientWidth - $('#mask').get(0).clientWidth / 2) {
      maskL = 350;
    }
    // 垂直方向
    if (maskT <= 0) {
      maskT = 0;
    } else if (maskT >= $('#small').get(0).clientHeight - $('#mask').get(0).clientHeight / 2) {
      maskT = 350;
    }
    // 移动mask位置
    $('#mask').get(0).style.left = maskL + 'px';
    $('#mask').get(0).style.top = maskT + 'px';
    // 修改 bigimg 的位置
    const canshux = ($('#big').get(0).clientWidth - $('.big').get(0).clientWidth) / ($('#small').get(0).clientWidth - $('#mask').get(0).clientWidth);
    const canshuy = ($('#big').get(0).clientHeight - $('.big').get(0).clientHeight) / ($('#small').get(0).clientHeight - $('#mask').get(0).clientHeight);
    $('#big').get(0).style.left = -maskL * canshux + 'px';
    $('#big').get(0).style.top = -maskT * canshuy + 'px';
  }
  mouseleav () {
    // mack 元素显示
    this.iscnj = false;
    // 大图显示
    this.isanj = false;
  }
  plamk () {
    this.nNum++;
  }
  plemk () {
    if (this.nNum > 1) {
      this.nNum--;
    } else if (this.nNum === 1) {
      this.nNum = 1;
    }
  }
  // 加入购物车
  addProduct() {
    if (this.isLock) {
      this.isLock = false;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.isLock = true;
      }, 600);
    } else {
      return;
    }
    // 点击时 购物车数量发生变化
    this.productNew.num = this.nNum + this.productNew.num;
    // // 购物车的单种商品的总价
    this.productNew.total = this.productNew.num * this.productNew.price;
    // // 点击时 购物车数量发生变化
    // this.productNew.num = this.nNum + this.productNew.num;
    // // 购物车的单种商品的总价
    // this.productNew.total = this.productNew.num * this.productNew.price;
    // // 对数组进行过滤去重复
    // if (this.msg.prouducts.length !== 0) {
    //   const arr = this.msg.prouducts.filter((value) => {
    //
    //     return value['title'] === this.productNew.title;
    //   });
    //   this.msg.prouducts = arr;
    // } else {
    //   this.msg.prouducts.push(this.productNew);
    // }
    // this.msg.sendProduct(this.productNew);
    this.http.post('/apl/cart', {
      img: this.productNew.img,
      title: this.productNew.title,
      gui: this.productNew.gui,
      num: this.productNew.num,
      price: this.productNew.price,
      total: this.productNew.total
    }).subscribe((data) => {
      this.app.addCart(this.productNew);
    });
  }
}


